<template>
	<view class="changeMobile">
		<view class="header">
			
			<view class="head">
				<text>为确保是你本人操作，请先完成以下验证</text>
			</view>
			
			<view class="password">
				
				<text>登录密码:</text>
				<input class="uni-input" minlength="8" maxlength="20" password type="text"  v-model="password" placeholder='请输入登录密码' placeholder-style="color:#cccccc">
				
			</view>
			
			
			
		</view>
			
		<view class="footer">
			<view class="next_btn" @click="next">下一步</view>
		</view>
		
	</view>
</template>

<script>
import uniIcon from '@/components/uni-icon.vue';
var util = require('../../../common/util.js');
export default {
    data() {
        return {
            password: '',
            mobile:uni.getStorageSync('mobile'),
        };
    },
  
    methods: {
        next() {
            if (this.password.length < 8 || this.password.length > 20) {
                uni.showToast({
                    title: '输入密码不正确！',
                    icon: 'none',
                    duration: 1000
                });
                return;
            }
            util.ajax(
                'userLogin',
                {
                    mobile: this.mobile,
                    password: this.password
                },
                data => {
                    let json = data.data;
                    if (json.status) {
                        setTimeout(() => {
                            uni.navigateTo({
                                url: './changeMobile2'
                            });
                        }, 1000);
                    } else {
                        uni.showToast({
                            title: json.message,
                            icon: 'none',
                            duration: 1000
                        });
                    }
                },
                (data, code) => {
                    console.log(data);
                    uni.showToast({
                        title: JSON.stringify(data.message),
                        icon: 'none',
                        duration: 1000
                    });
                }
            );
        }
    },
    components: {
        uniIcon
    }
};
</script>

<style lang="less">
@import '../../../common/icon.css';
@import '../../../common/uni.css';
.changeMobile {
    flex: 1;
    flex-direction: column;
    width: 100%;
    height: auto;
    .header {
        flex-direction: column;
        .head {
            color: #333333;
            font-size: 26upx;
            padding: 30upx 30upx 60upx;
            box-sizing: border-box;
            align-content: center;
        }
        .password {
            background: white;
            padding: 0 30upx;
            box-sizing: border-box;
            height: 100upx;
            align-items: center;
            text {
                display: flex;
                align-items: center;
                color: #333333;
                font-size: 30upx;
            }
            input {
                padding-left: 30upx;
            }
        }
    }
    .footer {
        padding: 0 30upx;
        box-sizing: border-box;
        flex-direction: column;
        width: 100%;
        .next_btn {
            background: -webkit-linear-gradient(to right, #ff48ac, #ff1268);
            background: -o-linear-gradient(to right, #ff48ac, #ff1268);
            background: -moz-linear-gradient(to right, #ff48ac, #ff1268);
            background: -mos-linear-gradient(to right, #ff48ac, #ff1268);
            background: linear-gradient(to right, #ff48ac, #ff1268);
            color: white;
            font-size: 34upx;
            width: 100%;
            height: 100upx;
            justify-content: center;
            align-items: center;
            border-radius: 5upx;
            margin: 120upx auto 0;
        }
    }
}
</style>
